<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <div class="list">
    <!-- <div class="item">
        <div></div>
        <img src="" alt="">
        <div></div>
    </div> -->
  </div>
  <button>按钮</button>
  <body>
    <script>
      var oBtn = document.querySelector("button");
      function clickHandler() {
        //1.创建一个xhr对象
        let xhr = new XMLHttpRequest();
        //2.打开和服务器的链接。
        //参数1.请求method的方式：get方法
        //参数2.接口地址-url
        let hotProductAPI =
          "http://106.52.75.114/api/product/hot?page=1&limit=5";
        xhr.open("GET", hotProductAPI);
        xhr.send();
        xhr.onload = function () {
          console.log("服务器返回数据会自动执行");
          //这个是异步执行，比较慢一点
          //xhr.status
          //http协议的相应状态码
          //常见的http协议状态：   ---200  请求成功
          //  ---404 地址错误
          if (xhr.status == 200) {
            //服务器返回相应数据--响应体 response body
            console.log(xhr.responseText);
            let obj = JSON.parse(xhr.responseText);
            console.log(obj);
            // obj服务器返回数据有哪些属性：
            obj.status; //0 表示失败， 1表示操作成功
            obj.msg; //表示弹出的提示信息
            obj.data; //真正的数据
            let str = "";
            obj.data.forEach((v) => {
              v; //数组的数据-对象-一个对象-表示一个商品信息
              str += `<div class="item">
                             <div>${v.store_name}</div>
                            <img src="${v.image}" alt="">
                             <div>${v.price}</div>
                             </div>`;
            });
            //把拼接好的div字符串 赋值给list
            document.querySelector(".list").innerHTML = str;
          }
        };
      }
      //封装节流函数
      function throttle(func, wait) {
        let lastTime = 0;
        return function () {
          const now = Date.now();
          if (now - lastTime >= wait) {
            func.apply(this, arguments);
            lastTime = now;
          }
        };
      }
      oBtn.onclick = throttle(clickHandler, 1000);
    </script>
  </body>
</html>
